<template>
  <view v-if="shenheStatus == 0" class="complete">
    <view class="head">
      <view class="title">
        <!-- <image src="../images/complete.png"></image> -->
        <text>还有资料未绑定，只需4步即可完成上线</text>
      </view>
      <view class="steps">
        <view :class="['stepItem', storeInfo.progress == 1 ? 'choosed' : '']">
          <view class="circle">
            <text></text>
          </view>
          <text>注册小程序</text>
        </view>
        <view :class="['stepItem', storeInfo.progress == 2 ? 'choosed' : '']">
          <view class="circle">
            <text></text>
          </view>
          <text>支付进件</text>
        </view>
        <view :class="['stepItem', storeInfo.progress == 3 ? 'choosed' : '']">
          <view class="circle">
            <text></text>
          </view>
          <text>完善资料</text>
        </view>
        <view :class="['stepItem', storeInfo.progress == 4 ? 'choosed' : '']">
          <view class="circle">
            <text></text>
          </view>
          <text>绑定收款码</text>
        </view>
      </view>
      <view
        class="reason"
        v-if="
          (storeInfo.progress == 1 || storeInfo.progress == 2) &&
          storeInfo.num == 2
        "
      >
        <text>您提交的内容有以下错误:</text>
        <text v-if="storeInfo.progress == 1">{{
          storeInfo.mini_info.msg
        }}</text>
        <text v-if="storeInfo.progress == 2">{{
          storeInfo.merchant_info.refuse_desc
        }}</text>
      </view>
	  <view
	    class="reason"
	    v-if="storeInfo.alert_msg"
	  >
	    <text>提示:</text>
	    <text>{{
	      storeInfo.alert_msg
	    }}</text>
	  </view>
	  <view
	    class="reason"
	    v-if="storeInfo.alert_url"
		style="overflow: hidden;"
	  >
	    <view style="display: flex;justify-content: space-between;">
			<text>链接:</text>
			<text @click="copyUrl(storeInfo.alert_url)">复制</text>
		</view>

	    <text>{{
	      storeInfo.alert_url
	    }}</text>

	  </view>
      <view
        class="reason"
        v-if="
          storeInfo.progress == 3 && (storeInfo.num == 5 || storeInfo.num == 8) && storeInfo.mini_data.msg
        "
      >
        <text>您提交的内容有以下错误:</text>
        <text>{{ storeInfo.mini_data.msg }}</text>
      </view>
    </view>
    <view class="content">
      <information
        v-if="storeInfo.progress == 1"
        :bind_store_id="bind_store_id"
        :info="storeInfo.mini_info"
        :status="storeInfo.num"
        @submit="getCompleteInfo()"
      ></information>
      <payment
        v-if="storeInfo.progress == 2"
        :bind_store_id="bind_store_id"
        :info="storeInfo.merchant_info"
        :status="storeInfo.num"
        @submit="getCompleteInfo()"
      ></payment>
      <miniApp
        v-if="storeInfo.progress == 3"
        :bind_store_id="bind_store_id"
        :info="storeInfo.mini_data"
        :status="storeInfo.num"
        :allCat="storeInfo.all_categories"
        :allOldCat="storeInfo.all_old_category"
        :currentCat="storeInfo.mini_data.categories"
        @submit="getCompleteInfo()"
        @changeCurrentCat="changeCurrentCat"
      ></miniApp>
      <moneyCode
        v-if="storeInfo.progress == 4"
        :bind_store_id="bind_store_id"
        :status="storeInfo.num"
		:qrcode_id="storeInfo ? storeInfo.qrcode_id : ''"
        @submit="getCompleteInfo()"
      ></moneyCode>
      <view class="success" v-if="storeInfo.progress == 5">
        恭喜您已经成功创建店铺~
      </view>
    </view>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from '@/components/shenhe/shenhe';
import information from './components/information.vue';
import payment from './components/payment.vue';
import miniApp from './components/miniApp.vue';
import moneyCode from './components/moneyCode.vue';
export default {
  components: {
    information,
    payment,
    miniApp,
    moneyCode,
    Shenhe,
  },
  data() {
    return {
      bind_store_id: '',
      storeInfo: {},
    };
  },
  onLoad(option) {
    if (option.id) {
      this.bind_store_id = option.id;
      this.getCompleteInfo();
    }
  },
  methods: {
    changeCurrentCat(params){
      this.storeInfo.mini_data.categories = params;
    },
    // 获取小程序完善信息
    async getCompleteInfo() {
      const res = await this.$allrequest.merchant.completeInfo(
        {
          bind_store_id: this.bind_store_id,
        },
        true
      );
      if (res.code == 0) {
        this.storeInfo = res.data;
        if (this.storeInfo.progress > 4) {
      
        }
      }
    },
	copyUrl(url) {
		uni.setClipboardData({
			data: url,
			success: function () {
				uni.showTabBar({
					title: '复制成功',
					icon: 'none'
				})
			},
			fail() {
				uni.showTabBar({
					title: '复制失败',
					icon: 'none'
				})
			}
		});
	}
  },
};
</script>

<style lang="less" scoped>
.complete {
  color: #262626;
  font-family: PingFang SC;
  .head {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 40rpx;
    padding-bottom: 24rpx;
    border-bottom: 24rpx solid #f2f2f2;
    .title {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 30rpx;
      image {
        width: 104rpx;
        height: 90rpx;
        margin-bottom: 20rpx;
      }
    }
    .steps {
      width: 100%;
      display: flex;
      margin-top: 40rpx;
      padding: 0 60rpx;
      .stepItem {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        .circle {
          width: 34rpx;
          height: 34rpx;
          border-radius: 50%;
          background-color: #f2f2f2;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 26rpx;
          text {
            display: block;
            width: 18rpx;
            height: 18rpx;
            border-radius: 50%;
            background-color: #bababd;
          }
        }
        ::before {
          content: '';
          position: absolute;
          width: calc(50% - 17rpx);
          height: 2rpx;
          background-color: #e6e6e6;
          top: 17rpx;
          left: 0;
        }
        ::after {
          content: '';
          position: absolute;
          width: calc(50% - 17rpx);
          height: 2rpx;
          background-color: #e6e6e6;
          top: 17rpx;
          left: calc(50% + 17rpx);
        }
      }
      .stepItem:nth-child(1) {
        ::before {
          height: 0;
        }
      }
      .stepItem:last-child {
        ::after {
          height: 0;
        }
      }
      .choosed {
        .circle {
          background-color: #fdf1f0;
          text {
            background-color: #f0250e;
          }
        }
      }
    }
    .reason {
      width: 702rpx;
      margin-top: 24rpx;
      padding: 24rpx;
      background-color: #f8f8f8;
      display: flex;
      flex-direction: column;
      font-size: 24rpx;
      text:nth-child(1) {
        font-weight: 500;
        margin-bottom: 10rpx;
      }
      text:nth-child(2) {
        color: #f0250e;
      }
    }
  }
  .success {
    display: flex;
    padding-top: 100rpx;
    font-size: 24rpx;
    color: #8c8c8c;
    justify-content: center;
  }
}
</style>
